<template>
  <div class="menu-management">
    <!-- 顶部操作栏 -->
    <div class="top-action-bar">
      <el-form :inline="true" class="search-form">
        <el-form-item label="菜单名称：">
          <el-input v-model="searchName" placeholder="请输入" style="width: 180px"></el-input>
        </el-form-item>
 
        <el-form-item label="菜单状态：">
          <el-select v-model="searchStatus" placeholder="所有" style="width: 120px">
            <el-option label="所有" value=""></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
 
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
 
    <!-- 操作按钮组 -->
    <div class="action-buttons">
      <el-button type="primary" :icon="Plus" @click="showAddDialog">新增</el-button>
    </div>
 
    <!-- 数据表格 -->
    <el-table 
      :data="filteredData"
      style="width: 100%; margin-top: 15px"
      class="custom-table"
    >
      <el-table-column prop="name" label="菜单名称" width="150"></el-table-column>
      <el-table-column prop="order" label="排序" width="80"></el-table-column>
      <el-table-column prop="url" label="请求地址" width="100">
        <template #default>#</template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="100">
        <template #default>
          <el-tag type="info">目录</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="visible" label="可见" width="100">
        <template #default>
          <el-tag type="warning">提示</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="permission" label="权限标识" width="100">
        <template #default>
          <el-tag type="danger">取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="edit(row)">编辑</el-button>
          <el-button type="text" size="small" style="color: #F56C6C" @click="showDeleteConfirm(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑菜单">
      <el-form :model="editForm" ref="editFormRef">
        <el-form-item label="菜单名称">
          <el-input v-model="editForm.name"></el-input> 
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model.number="editForm.order"></el-input> 
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </template>
    </el-dialog>
 
    <!-- 新增对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增菜单">
      <el-form :model="addForm" ref="addFormRef">
        <el-form-item label="菜单名称">
          <el-input v-model="addForm.name"></el-input> 
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model.number="addForm.order"></el-input> 
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAdd">确定</el-button>
      </template>
    </el-dialog>
 
    <!-- 删除确认对话框 -->
    <el-dialog v-model="deleteDialogVisible" title="确认删除">
      <span>确定要删除该菜单吗？</span>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
 
// 表格数据 
const tableData = ref([
  { name: '信息管理', order: 0 },
  { name: '学生选择', order: 1 },
  { name: '生产实习', order: 1 },
  { name: '顶岗实习', order: 1 },
  { name: '成绩管理', order: 2 },
  { name: '实习管理', order: 2 },
  { name: '分享', order: 3 },
  { name: '系统管理', order: 4 },
  { name: '系统工具', order: 4 },
  { name: '系统监控', order: 5 }
])
 
// 搜索条件 
const searchName = ref('')
const searchStatus = ref('')
 
// 对话框状态 
const editDialogVisible = ref(false)
const addDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
 
// 表单数据 
const editForm = reactive({})
const addForm = reactive({ name: '', order: null })
const editIndex = ref(-1)
const deleteRow = ref({})
 
// 表单引用 
const editFormRef = ref(null)
const addFormRef = ref(null) 
 
// 过滤后的数据 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    return (
      (searchName.value  === '' || item.name.includes(searchName.value))  &&
      (searchStatus.value  === '' || item.status  === searchStatus.value) 
    )
  })
})
 
// 初始化数据 
onMounted(() => {
  // 可以在这里添加初始化逻辑 
})
 
// 搜索 
const search = () => {
  // computed filteredData 会自动更新 
}
 
// 重置 
const reset = () => {
  searchName.value  = ''
  searchStatus.value  = ''
}
 
// 显示新增对话框 
const showAddDialog = () => {
  addDialogVisible.value  = true 
  addForm.name  = ''
  addForm.order  = null 
}
 
// 保存新增 
const saveAdd = () => {
  tableData.value.push({  ...addForm })
  addDialogVisible.value  = false 
}
 
// 编辑 
const edit = (row) => {
  editDialogVisible.value  = true 
  Object.assign(editForm,  { ...row })
  editIndex.value  = tableData.value.findIndex(item  => item.name  === row.name) 
}
 
// 保存编辑 
const saveEdit = () => {
  tableData.value.splice(editIndex.value,  1, editForm)
  editDialogVisible.value  = false 
}
 
// 显示删除确认 
const showDeleteConfirm = (row) => {
  deleteDialogVisible.value  = true 
  deleteRow.value  = row 
}
 
// 确认删除 
const confirmDelete = () => {
  const index = tableData.value.findIndex(item  => item.name  === deleteRow.value.name) 
  tableData.value.splice(index,  1)
  deleteDialogVisible.value  = false 
}
</script>
 
<style scoped>
.menu-management {
  padding: 20px;
  background: #fff;
}
 
.top-action-bar {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}
 
.search-form {
  display: flex;
  align-items: center;
}
 
.action-buttons {
  margin: 15px 0;
}
 
.el-form-item {
  margin-bottom: 0;
}
 
.custom-table {
  margin-top: 15px;
}
 
.el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}
 
.el-button--text {
  padding: 0 5px;
}
</style>